<template>
  <div>
    <nav-header :headerTitle="'提现'" :navBgColor="'#fff'"></nav-header>
    <div class="nav-height"></div>
    <div class="withdrawal">
      <div class="wd-form">
        <div class="wd-form-box">
          <div class="item clearfix">
            <p class="title left">提现金额</p>
            <p class="content colorFF2525 left">{{amt}}元</p>
          </div>
          <div class="item clearfix" style="height:auto;">
            <p class="tips">
              请输入实名信息为
              <span class="colorFF2525">{{name}}</span> 的支付宝账号
            </p>
          </div>
          <div class="item clearfix">
            <p class="title left">支付宝账号</p>
            <input
              class="content left"
              type="text"
              name
              id
              placeholder="输入支付宝账号"
              v-model="alipayAccount"
            />
          </div>
          <div class="item clearfix">
            <p class="title left">确认账号</p>
            <input
              class="content left"
              type="text"
              name
              id
              placeholder="确认支付宝账号"
              v-model="alipayAct_confirm"
            />
          </div>
        </div>
      </div>
      <div class="wd-way">
        <p class="title">提示</p>
        <div class="tips-box clearfix">
          <div class="red-dot left"></div>
          <p class="tips-content left">
            支付宝提现，即直接转账到支付宝账号；提现时
            <span class="colorFF2525">请务必正确填写支付宝账号</span>（手机号或邮箱账号），如因个人原因造成的支付宝账号填写错误，损失将由个人承担。 假如已忘记支付宝账号，可通过
          </p>
        </div>
        <div class="tips-box clearfix">
          <div class="red-dot left"></div>
          <p class="tips-content left">
            假如已忘记支付宝账号，可通过
            <span class="colorFF2525">“支付宝->我的->个人头像昵称->支付宝账号”</span>查看
          </p>
        </div>
      </div>
      <div class="wd-footer">
        <van-button
          :disabled="isDisabled"
          class="form-btn"
          type="default"
          @click="tap2witdrawal"
        >立即提现</van-button>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import navHeader from "@/components/NavHeader";
import mixin from '@/utils/mixin'
import { Button, Dialog } from "vant";
Vue.use(Button);
export default {
  name: "withdrawalForAlipay",
  mixins: [mixin],
  components: {
    navHeader
  },
  data() {
    return {
      amt: 0,
      alipayAccount: "",
      alipayAct_confirm: "",
      name: "",
      isDisabled: false
    };
  },
  mounted() {
    window.document.getElementsByTagName("html")[0].style.backgroundColor =
      "rgba(248,249,251,1)";
    this.amt = this.$route.query.amt;
    this.initUserInfo();
  },
  beforeDestroy() {
    window.document.getElementsByTagName("html")[0].style.backgroundColor = "";
  },
  methods: {
    // 初始化用户信息
    initUserInfo() {
      this.$http
        .post("user/getUserInfo", {
          uniqueId: window.localStorage.getItem("uniqueIdByInfluencer")
        })
        .then(
          res => {
            let resData = res.data;
            this.name = resData.nickName;
            if (resData.alipayCode) {
              this.alipayAccount = resData.alipayCode;
            }
          },
          err => {
            console.log(err);
          }
        );
    },
    // 立即提现
    tap2witdrawal() {
      this.isDisabled = true;
      if (this.alipayAccount == "") {
        Dialog.alert({
          message:"请输入支付宝账号！"
        }).then(() => {
          this.isDisabled = false;
        });
        return false;
      }
      if (this.alipayAct_confirm == "") {
        Dialog.alert({
          message:"请确定支付宝账号！"
        }).then(() => {
          this.isDisabled = false;
        });
        return false;
      }
      if (this.alipayAccount != this.alipayAct_confirm) {
        Dialog.alert({
          message:"支付宝账号两次输入不一致，请确定并重新输入！"
        }).then(() => {
          this.alipayAct_confirm = "";
          this.isDisabled = false;
        });
        return false;
      }
      let sendData = {
        uniqueId: window.localStorage.getItem("uniqueIdByInfluencer"),
        amount: this.$route.query.amt*100,
        alipayCode: this.alipayAccount,
        platformRole: 2
      };
      this.$http.post("exchange/aliPayWithdrawal",sendData).then(()=>{
        Dialog.confirm({
          message:
            "我们已经接收到您的提现申请，我们会尽快为您办理提现，提现成功后我们会给您发送通知",
          showCancelButton: false,
          confirmButtonText: "我知道了",
          beforeClose: (action, done) => {
            this.isDisabled = false;
            done();
            if (action === "confirm") {
              this.$router.go(-1);
            }
          }
        });
      });
      
    }
  }
};
</script>

<style scoped lang="scss">
.withdrawal {
  width: 100%;
  background: rgba(248, 249, 251, 1);
  margin: 0px auto 150px;
  .wd-form {
    width: 100%;
    padding-top: 20px;
    background: #fff;
    .wd-form-box {
      width: 686px;
      margin: auto;
      .item {
        height: 48px;
        padding: 30px 0;
        font-size: 34px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(48, 49, 51, 1);
        line-height: 48px;
        border-bottom: 1px solid rgba(237, 237, 237, 1);
        .title {
          width: 224px;
        }
        .content {
          width: 460px;
          height: 48px;
        }
        .tips {
          width: 650px;
          font-size: 28px;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          color: rgba(129, 129, 129, 1);
          line-height: 48px;
        }
      }
    }
  }
  .wd-way {
    width: 686px;
    margin: auto;
    padding: 32px 0;
    .title {
      font-size: 40px;
      font-family: PingFangSC-Medium;
      font-weight: 700;
      color: rgba(48, 49, 51, 1);
      line-height: 56px;
      margin-top: 30px;
    }
    .tips-box {
      width: 100%;
      margin-top: 24px;
      .red-dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        overflow: hidden;
        background: rgba(255, 37, 37, 1);
        position: relative;
        top: 19px;
      }
      .tips-content {
        width: 650px;
        font-size: 28px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(129, 129, 129, 1);
        line-height: 48px;
        margin-left: 18px;
      }
    }
  }
  .wd-footer {
    width: 686px;
    text-align: center;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 9;
    .form-btn {
      display: block;
      width: 562px;
      height: 88px;
      font-size: 34px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: #fff;
      line-height: 88px;
      background: rgba(254, 37, 37, 1);
      border-radius: 44px;
      margin: 32px auto 16px;
    }
  }
}
</style>
